<template>
  <div>
    <div id="background">
      <div class="container">
        <form action="">
          <h1>登 录</h1>
          <div class="form">
            <div class="item">
              <label>账号：</label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名">
              <!-- v-model把输入的值传输给name变量 -->
              <br/>
            </div>
            <div class="item">
              <label>密码：</label><input type="password" name="password"
                                         autocomplete="off"
                                         v-model.trim="password"
                                         placeholder="请输入密码">
              <br/>
            </div>
          </div>

        </form>
        <button  type="submit" @click.prevent="handlelogin">登录			</button>
        <!-- v-on点击按钮触发handlelogin方法 -->
        <button  @click.prevent="handleregister">注册</button>
      </div>
    </div>
  </div>
</template>
<!--js-->
<script>
// 传参
export default {
  name: 'SeismLogin',
  data(){
    return{
      name: "",//姓名，用v-model绑定监听，将输入的字符串赋值给name变量
      password: "",//密码
      st: "false",//false为不保存登录
    }
  },
  methods: {
    open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    setName() {
      return this.name;
    },
    handlelogin() {

      this.$axios.post('/api/users/login', {
        "userName": this.name,
        "userPws": this.password
      }).then(res =>{
        if(res.data.code === 20041) {
          console.log(this.setName())
          this.handlesave(); // 保留登录状态
          this.open1("登录成功!")
          sessionStorage.setItem('name', this.setName());
          this.$router.replace('/index/map');//如果输入的名字以及密码正确路由跳转至个人页面
        }else {
          this.open2('账号不存在，请注册后登录');//查无此号
          this.name = '';
          this.password = '';
        }
      }).catch(error =>{
        // TODO 待更改
        sessionStorage.setItem('name', this.setName());
        this.$router.replace('/index');//如果输入的名字以及密码正确路由跳转至个人页面
        this.handlesave(); // 保留登录状态
        console.log(error)
        // this.open4("系统出错了")
      })
      // if(this.name === sessionStorage['name'] && this.password=== sessionStorage['password']) {
      //   this.$router.replace('/SeismIndex');//如果输入的名字以及密码正确路由跳转至个人页面
      // } else
      if(this.name=== '')//名字为空
      {
        this.open4('用户名不为空');
      }
      else if(this.password === '')//密码为空
      {
        this.open4('密码不为空');
      }
    },
    handleregister() {
      this.$router.replace('/register')//点击注册按钮，跳转至注册页面
    },
    //点击保持登录状态触发handlesave
    handlesave(){
      this.st="true";//修改登录状态为true
      sessionStorage.setItem('s',this.st);
      console.log(sessionStorage.s);
    },
  }
}
</script>

<!--css-->
<style scoped>
@import "../assets/css/SeismLogin.css";
</style>